<!--
 * @Author: Bennent_G
 * @Date: 2025-02-25 17:23:07
 * @LastEditTime: 2025-02-25 17:43:16
 * @Description: 
-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
	<div class="canvas-container" v-loading="loading">
		<canvas id="canvas"></canvas>
		<div id="operations">

			<div id="pencil" class="operater-item" alt="画笔">
				<img src="./image/pen.png" alt="画笔" />
			</div>

			<div id="rectangle" class="operater-item">
				<img src="./image/rectangle.png" alt="矩形" />
			</div>

			<div id="circle" class="operater-item">
				<img src="./image/circle.png" alt="圆形" />
			</div>

			<div id="arrow" class="operater-item">
				<img src="./image/arrow.png" alt="箭头" />
			</div>

			<div id="font" class="operater-item">
				<img src="./image/font.png" alt="" />
			</div>

			<div id="undo" class="operater-item">
				<img src="./image/undo.png" alt="" />
			</div>

			<div id="clear" class="operater-item">
				<img src="./image/clear.png" alt="" />
			</div>
			<!-- <el-tooltip content="重做">
				<div id="redo" class="operater-item">
					<img src="./image/pen.png" alt="" />
				</div>
			</el-tooltip> -->
			<div id="save" class="operater-item">
				<img src="./image/save.png" alt="" />
			</div>
			<input type="color" id="palette" />
		</div>
	</div>
</div>

<script src="./index.js"></script>
<script>
	const { createApp, ref, onMounted } = Vue

	createApp({
		setup() {
			const message = ref('Hello vue!')
			onMounted(() => {
				const container = document.getElementById("canvas");
				const url = 'https://picsum.photos/800/400';
				canvasBoard = new CanvasBoard(container, url, () => {
					// loading.value = false;
				});
				// 绑定工具按钮事件
				document.getElementById("pencil").addEventListener("click", () => canvasBoard.setTool("pencil"));
				document.getElementById("arrow").addEventListener("click", () => canvasBoard.setTool("arrow"));
				document.getElementById("rectangle").addEventListener("click", () => canvasBoard.setTool("rectangle"));
				document.getElementById("circle").addEventListener("click", () => canvasBoard.setTool("circle"));
				document.getElementById("clear").addEventListener("click", () => canvasBoard.clear());
				document.getElementById("undo").addEventListener("click", () => canvasBoard.undo());
				// document.getElementById("redo").addEventListener("click", () => canvasBoard.redo());
				document.getElementById("save").addEventListener("click", () => canvasBoard.saveImage());
				document.getElementById("font").addEventListener("click", () => canvasBoard.enableTextMode());

				// 绑定颜色选择器
				document.getElementById("palette").addEventListener("change", (e) => {
					canvasBoard.setColor(e.target.value);
				});
			})

			return {
				message
			}
		}
	}).mount('#app')
</script>

<style>
	.canvas-container {
		position: relative;
		width: 100%;
		height: 400px;
		border: 1px solid #ccc;
		border-radius: 8px;
	}

	#operations {
		height: 40px;
		position: absolute;
		bottom: -44px;
		left: 0px;
		display: grid;
		grid-auto-flow: column;
		grid-gap: 10px;
		background: rgb(216.8, 235.6, 255);
		width: 100%;
		align-items: center;
		justify-items: center;
	}

	.operater-item {
		cursor: pointer;
	}

	.operater-item img {
		width: 24px;
		height: 24px;
	}

	button:hover {
		background-color: #f0f0f0;
	}
</style>